<template>
  <view class="home">
    <view class="exchange-box">
      <view class="input-box u-flex-y-center">
        <input type="text" class="u-flex-1" v-model="code" placeholder="请输入兑换链接" />
      </view>
      <view class="exchange-btn" @click="_couponExchange">兑换</view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { couponExchange } from '../../config/api';
  const code = ref('')
  // 兑换优惠券
  const _couponExchange = () => {
    if (!code.value) {
      uni.$u.toast('请输入兑换码')
      return
    }
    couponExchange({ code: code.value }).then(res => {
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background: #f7f6fa;
    padding: 0 20rpx;
  }

  .exchange-box {
    background: #fff;
    padding: 28rpx 24rpx;
    border-radius: 20rpx;

    .input-box {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      background: #f5f5f5;
      border-radius: 20rpx;
      padding: 0 24rpx;
      height: 92rpx;
    }

    .exchange-btn {
      width: 244rpx;
      height: 70rpx;
      background: #F87610;
      border-radius: 36rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #fff;
      margin: auto;
      margin-top: 60rpx;
      text-align: center;
      line-height: 70rpx;
    }
  }
</style>